import {history} from 'umi'
import {Form, Input, Picker, PickerRef, Selector, TextArea, Toast} from "antd-mobile";
import Trips from "@/components/Trips";
import {RefObject} from "react";

export default function HomePage() {
    const basicColumns = [
        [
            {label: '大禹节水集团总部', value: '1'},
            {label: '农水集团总部', value: '2'},
        ]
    ]
    const basicColumns2 = [
        [
            {label: '信息化部', value: '1'},
            {label: '运营', value: '2'},
        ]
    ]
    return (
        <div>
            <Form requiredMarkStyle='asterisk' mode="default">
                <Form.Header>基本信息</Form.Header>
                <Form.Item name='name' label='姓名' rules={[{required: true}]}>
                    <Input type="text" placeholder='胡均斌' value={"胡均斌"} readOnly/>
                </Form.Item>

                <Form.Item name='name' label='工号' rules={[{required: true}]}>
                    <Input placeholder='014880' value="014880" readOnly/>
                </Form.Item>
                <Form.Item name='applyOrgCode' label='所属组织'  rules={[{required: true}]}
                           trigger='onConfirm'
                           onClick={(e, pickerRef: RefObject<PickerRef>) => {
                               pickerRef.current?.open() // ⬅️
                           }}>
                    <Picker columns={basicColumns}>
                        {(value) => {
                            console.log("***" + value)
                            console.log(value)
                            return value.length > 0 ? value[0].label : '请选择所属组织';
                        }}
                    </Picker>
                </Form.Item>
                <Form.Item name='applyDept' label='所属部门' rules={[{required: true}]}
                           trigger='onConfirm'
                           onClick={(e, pickerRef: RefObject<PickerRef>) => {
                               pickerRef.current?.open() // ⬅️
                           }}>
                    <Picker columns={basicColumns2}>
                        {(value) => {
                            console.log("***" + value)
                            console.log(value)
                            return value.length > 0 ? value[0].label : '请选择所属部门';
                        }}
                    </Picker>
                </Form.Item>
                <Form.Item name='cause' label='申请事由' rules={[{required: true}]}>
                    <TextArea placeholder='请输入内容' rows={4}/>
                </Form.Item>
                <Form.Item name='feeType' label='费用类型' rules={[{required: true}]}>
                    <Selector
                        options={[{value: "1", label: "部门"}, {value: "2", label: "项目"}]}
                        defaultValue={['1']}
                        onChange={(arr, extend) => console.log(arr, extend.items)}
                    />
                </Form.Item>
                <Form.Item name='name' label='项目' rules={[{required: true}]} onClick={() => {
                    history.push("/index/project")
                }}>
                    <Input placeholder='请选择项目'/>
                </Form.Item>
                <Form.Item name='name3' label='姓名3' rules={[{required: true}]} hidden={true}>
                    <Input type="hidden" placeholder='请输入内容' value='只读模式的输入框' readOnly/>
                </Form.Item>
                <Form.Item name='name' label='费用承担组织' rules={[{required: true}]} onClick={() => {
                    history.push("/index/city")
                }}>
                    <Input placeholder='请选择费用承担组织'/>
                </Form.Item>
                <Form.Item name='name3' label='姓名3' rules={[{required: true}]} hidden={true}>
                    <Input type="hidden" placeholder='请输入内容' value='只读模式的输入框' readOnly/>
                </Form.Item>
                <Form.Item name='name' label='费用承担部门' rules={[{required: true}]}>
                    <Input placeholder='请选择费用承担部门'/>
                </Form.Item>
                <Form.Item name='name3' label='姓名3' rules={[{required: true}]} hidden={true}>
                    <Input type="hidden" placeholder='请输入内容' value='只读模式的输入框' readOnly/>
                </Form.Item>
            </Form>

            <Trips></Trips>
        </div>
    );
}
